/*1rem 的单位, 1rem = 16px */

$rem-unit: 16px;
$color-a: #333;
$color-b: #666;
$color-c: #999;
$color-030303: #030303;
$color-CF9860: #CF9860;
/*
单位转换器
$n,是要转换的单位,就可以从效果图中直接获取像素值就可以了。
@return 转换后的单位 ××rem。
*/

@function unit-convertor($n) {
    @return ($n/$rem-unit)+rem;
}

html {
    font-size: $rem-unit;
}
body{
    margin: 0;
}

/*
 外边距样式定义 m是margin的缩写
*/
//mt t是top的缩写 ，上外边距定义
@each $size in 10px, 20px {
    .mt#{$size/1px} {
        margin-top: unit-convertor($size);
    }
}

//mr r是right的缩写 右外边距定义
@each $size in 5px, 8px, 10px {
    .mr#{$size/1px} {
        margin-right: unit-convertor($size);
    }
}

//mb b是bottom的缩写 下外边距定义
@each $size in 10px, 15px, 20px {
    .mb#{$size/1px} {
        margin-bottom: unit-convertor($size);
    }
}

//ml l是left的缩写 左外边距定义
@each $size in 6px, 8px, 12px {
    .ml#{$size/1px} {
        margin-left: unit-convertor($size);
    }
}

/*
 内边边距样式定义 p是padding的缩写
*/
//pt  t是top的缩写 上外边距定义
@each $size in 10px, 14px, 19px, 20px {
    .pt#{$size/1px} {
        padding-top: unit-convertor($size);
    }
}

//pr r是right的缩写 右外边距定义
@each $size in 5px, 10px, 20px, 22px {
    .pr#{$size/1px} {
        padding-right: unit-convertor($size);
    }
}

//pb b是bottom的缩写 下外边距定义
@each $size in 10px, 20px {
    .pb#{$size/1px} {
        padding-bottom: unit-convertor($size);
    }
}

//pl l是left的缩写 左外边距定义
@each $size in 6px, 8px, 12px, 19px, 20px {
    .pl#{$size/1px} {
        padding-left: unit-convertor($size);
    }
}

/*
宽度定义。按照宽度由小到的顺序定义
命名规范 .w**, w表示width
*/
@each $size in 40px, 76px, 60px {
    .w#{$size/1px} {
       width: unit-convertor($size);
    }
}

/**
宽度按照百分比定义
命名规范 .w**p, w指width, p指percent
**/
@each $size in 50%, 100% {
    .w#{$size/1%}p {
       width: $size;
    }
}

/**
最小宽度定义，如果按照宽度由小到的顺序定义
命名规范 .min-w**, min-w指min-width
**/
@each $size in 150px, 200px {
    .min-w#{$size/1px} {
       min-width: unit-convertor($size);
    }
}

/**
最大宽度定义，如果按照宽度由小到的顺序定义
命名规范 .max-w**, max-w指max-width
**/
@each $size in 150px, 200px {
    .max-w#{$size/1px} {
       min-width: unit-convertor($size);
    }
}

/*
高度定义。按照高度由小到的顺序定义
命名规范 .h**, h表示height
*/
@each $size in 22px, 40px, 60px, 200px {
    .h#{$size/1px} {
       height: unit-convertor($size);
    }
}

/**
高度按照百分比定义
命名规范 .h**p, h指height, p指percent
**/
@each $size in 50%, 100% {
    .h#{$size/1%}p {
       height: $size;
    }
}

/**
最小高度定义，如果按照高度由小到的顺序定义
命名规范 .min-h**, min-h指min-height
**/
@each $size in 150px, 200px {
    .min-h#{$size/1px} {
       min-height: unit-convertor($size);
    }
}

/**
最大高度定义，如果按照高度由小到的顺序定义
命名规范 .max-h**, max-h指max-height
**/
@each $size in 150px, 200px {
    .max-h#{$size/1px} {
       min-height: unit-convertor($size);
    }
}

/*
字体大小定义
命名规范 .font**, **表示了字体的大小
**/
@each $size in 10px, 12px, 14px, 16px, 17px, 18px, 20px, 22px, 24px {
    .font#{$size/1px}{
        font-size: unit-convertor($size);
    }
}

/**
字重定义
*/
.thin{
    font-weight:100;
}
.extra-light{
    font-weight:200;
}
.light{
    font-weight:300;
}
.medium{
    font-weight: 500;
}
.semi-bold{
    font-weight: 600;
}
.bold{
    font-weight: 700;
}

/*
字体和颜色定义
命名规范 txt-{ font-size }-{ color }-{ font-weight }
*/
.txt-12-a{
    @extend .font12;
    color: $color-a;
}
.txt-12-a-bold{
    @extend .bold;
    @extend .font12;
    color: $color-a;
}
.txt-12-b{
    @extend .font12;
    color: $color-b;
}
.txt-14-a{
    @extend .font14;
    color: $color-a;
}
.txt-14-c{
    @extend .txt-14-a;
    color: $color-c;
}
.txt-17-030303{
    @extend .font17;
    color: $color-030303;
}

/*@mixin*/
@mixin display-flex($align:'', $justify :'', $direction : '', $wrap : '') {
    display: flex;
    @if $direction !='' {flex-direction: $direction};
    @if $wrap !='' {flex-wrap: $wrap};
    @if $align !='' {align-items: $align};
    @if $justify !='' {justify-content: $justify};
}
/*
 布局定义 
*/

.flex-a-center{
    @include display-flex(center);
}
.flex-a-center-wrap{
    @include display-flex(center,flex-start,row,wrap);
}
.flex-a-center-column{
    @include display-flex($align: center, $direction: column);
}
.flex-j-center-column{
    @include display-flex($justify:center, $direction: column);
}
.flex-j-space-between{
    @include display-flex(flex-start,space-between,row);
}
.flex-a-center-j-space-between{
    @include display-flex(center,space-between);
}
.flex-a-center-j-center{
    @include display-flex($align: center, $justify:center);
}

/*
组件定义
*/
//卡片定义
.card {
    position: relative;
    @include display-flex(center,center);  //使用mixin 的特性
    @extend .mr10; //使用 extend 延伸特性
    @extend .ml12;
    width: 100%;
    height: unit-convertor(122px);
    background-color: #d20421;
    border-radius: unit-convertor(2px);
    .content{
        margin: unit-convertor(10px);
        height: unit-convertor(112px);
        background: #fff;
    }
    .strip{
       position: absolute;
       top:0;
       left: 0;
       width: unit-convertor(50px);
       height: unit-convertor(56px);
       background-size: cover;
    }

}
/**
标签组件定义
**/
.tag {
    @include display-flex(center); 
    height: unit-convertor(20px);
    padding-left:  unit-convertor(5px);
    padding-right:  unit-convertor(5px);
    @extend .font12;
    @extend .medium;
    color:$color-c;
    border: unit-convertor(1px) solid rgba(211,51,69,0.40);
    border-radius:unit-convertor(10px);
}

